<template>
	<div>
		<header class="aui-header navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>{{name}}</div>
			<div></div>
		</header>
		
		<div class="menulist">
			<ul class="menulist-ul" :style="{width:len + 'rem'}">
				<li v-for="item in goodetype" :class="typename == item ?'on' :'samemenu-li'" @click="goodetypeon(item)"> {{item}}</li>
			</ul>
			<div class="more" @click="goodsclassifyon"><img src="../assets/images1/propup.png"></div>
			
		</div>
		<div class="goodsclassify" v-show='classifyshow'>
			<span v-for='item in goodetype' :class="typename == item ?'ons' :'goodsclassify_s'" @click="goodetypeon(item)">{{item}}</span>
		</div>
		
		<div class="goodscontent">
				
				<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
					<div class="goodelist" v-for="item in goodslist" @click="skipon(item.couponUrl)" v-if="item.spuPlatform == 'tb'">
						<div class="goodsimg"><img :src="item.mainImageUrl"></div>
						<div class="goodsName">
							{{item.goodsName}}
						</div>
						<div class="rawprice">
							<div>￥{{item.price}}</div>
							<div> / {{item.couponMoney}} 降元</div>
						</div>
						<div class="cashprice">
							<div>￥{{item.conPrice | keep}}</div>
							<div>已抢购{{item.totalSales}}件</div>
						</div>
						<div class="promptly">立即抢购</div>
					</div>
				</ul>
		</div>
		
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				classifyshow:false,    //商品隐藏
				name:'',
				module:'',
				len:'',
				goodetype:[],   //分类列表  
				typename:'',
				adazone_id:'',
				index:1,
				loading:'',
				goodslist:[],
			}
		},
		created(){
			this.name = this.$route.query.name;
			this.module = this.$route.query.module;
			this.adazone_id = localStorage.getItem('adazone_id');
			
				//分类商品
				var url = BaseUrl + 'tb/getcategory?type=' + this.module;
				this.$http.post(url).then(res=>{
					if(res.data.code == '10000'){
						this.goodetype = res.data.data;
						this.typename = res.data.data[0];
						var len = res.data.data.length;
						this.len = len*1.5;
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			
			
		},
		filters:{
			keep:function(val){
				val = Number(val)
				return val.toFixed(2)
			}
		},
		methods:{
			//导航退后
			retreat:function(){
				window.history.go(-1);
			},
			//分类的显示隐藏
			goodsclassifyon:function(){
				this.classifyshow = !this.classifyshow
			},
			//点击分类
			goodetypeon:function(val){
				this.typename = val;
				this.index = 1;
				this.goodslist = [];
				this.singInfo(this.index)
			},
				singInfo(index){
					if(this.module != 'hq'){
						var url = BaseUrl + 'tb/getfavitemByfavIds?adazone_id=' + this.adazone_id + '&q=' + this.typename + '&pageNo=' +this.index + '&type=' + this.module + '&pageSize=10'
					}
					else{
						var url = BaseUrl + 'tb/getfavitemByfavIds?adazone_id=' + this.adazone_id + '&q=' + this.typename + '&pageNo=' +this.index + '&pageSize=10' + '&type= ' + ""
					}
					
					this.$http.post(url).then(res=>{
//						console.log(res.data)
						if(res.data.code == '10000'){
								this.goodslist = this.goodslist.concat(res.data.data);
								if(res.data.isMore == "no"){
									this.loading = true;
									Toast({
										message: "暂无数据",
										position: 'bottom',
										duration: 3000
									})
									return;
								}else if(res.data.isMore == "have"){
									this.loading = false;
									this.index++;
								}
						}
					}).catch(error=>{
						Toast({
							message: "网络异常",
							position: 'middle',
							duration: 3000
						})
					})
				},
				loadMore(){
					this.loading = this.loading;
					if(this.loading == false){
						setTimeout(() => {
							this.singInfo(this.index);
							this.loading = this.loading;
						}, 1000);
					}
				}
//			}
		,
			skipon:function(val){
				window.location.href = val;
			}
		}
	}
</script>

<style scoped="scoped">
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		border-bottom: 1px solid #dcd2d1;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.24rem;
		z-index: 999;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.navigation div:nth-child(2){
		color: #ff2040;
	}
	
	/**菜单***/
	.menulist{
		width: 100%;
		height: 0.9rem;
		background-color: #fff;
		top:1rem;
		left: 0;
		overflow-x: auto;
		position: fixed;
		z-index:999;
		border-bottom: 1px solid #ccc;
	}
	.menulist-ul{
		height: 0.88rem;
		display: flex;
	}
	.samemenu-li{
		padding: 0.2rem;
		display: block;
	}
	.on{
		padding: 0.2rem;
		display: block;
		color: #ff2040;
		border-bottom: 1px solid #ff2040;
	}
	.more{
		width: 0.88rem;
		height: 0.88rem;
		z-index: 9;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		border-left: 1px solid #ccc;
		position: fixed;
		top: 1rem;
		right: 0;
		border-bottom: 1px solid #CCCCCC;
	}
	.more img{
		width: 0.39rem;
		height: 0.21rem;
		display: block;
	}
	
	/*商品*/
	.goodsclassify{
		/*height: 50%;
		overflow-y: auto;*/
		padding: 0.2rem 0.25rem;
		background: #f2f2f2;
		position: absolute;
		top: 1.9rem;left: 0;
		z-index: 9;
	}
	.goodsclassify_s{
		padding: 0.05rem 0.05rem;
		border: 1px solid #919191;
		color: #919191;
		font-size: 0.2rem;
		display: inline-block;
		margin: 0.05rem;
		border-radius:0.1rem ;
	}
	.ons{
		padding: 0.05rem 0.05rem;
		border: 1px solid #ff2040;
		color: #ff2040;
		font-size: 0.2rem;
		display: inline-block;
		margin: 0.05rem;
		border-radius:0.1rem ;
	}
	
	.goodscontent ul{
		overflow: hidden;
		padding-top: 2rem;
	}
	.goodelist{
		width: 47%;
		float: left;
		margin: 0.1rem;
	}
	.goodsimg{
		width: 100%;
		height: 2.5rem;
	}
	.goodsimg img{
		width: 100%;
		height: 2.5rem;
		display: block;
	}
	.goodsName{
		height: 0.55rem;
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #878787;
		font-size: 0.26rem;
		line-height: 1.2;
		padding: 0 0.2rem;
		margin-top: 0.05rem;
	}
	.goodsName img{
		width: 0.7rem;
		height: 0.3rem;
	}
	.rawprice{
		display: flex;
		flex-direction: row;
		padding: 0 0.2rem;
	}
	.rawprice div:nth-child(1){
		text-decoration: line-through;
		color: #989898;
		font-size: 0.2rem;
	}
	.rawprice div:nth-child(2){
		color: #FF2040;
		font-size: 0.2rem;
	}
	.cashprice{
		display: flex;
		justify-content: space-between;
	}
	.cashprice div:nth-child(1){
		color: #FF2040;
		font-size: 0.26rem;
	}
	.cashprice div:nth-child(2){
		color: #989898;
		font-size: 0.2rem;
	}
	.promptly{
		margin: 0.2rem;
		background: #ff2040;
		color: #fff;
		text-align: center;
		padding: 0.05rem 0;
		border-radius: 0.3rem;
	}
</style>